<template>
  <view class="container" :style="{height: windowHeight + 'px'}">
    <scroll-view :scroll-into-view="intoId" scroll-y :style="{height: windowHeight-65 + 'px'}">
       <!--聊天信息显示区域 -->
      <view v-for="(msg, index) in msgs" :key="index" class="message-area">
        <!--我的-->
        <view :id="`id_${index}`" v-if="msg.role !== 'assistant'" class="message-right">
          <text class="text">{{ msg.content }}</text>
          <image src="../../static/mine.jpg" class="avatar"></image>
        </view>
        <!--机器人-->
        <view :id="`id_${index}`" v-else class="message-left">
          <image src="../../static/avter.jpg" class="avatar"></image>
          <text class="text">{{ msg.content }}</text>
        </view>
      </view>
    </scroll-view>  
    <!-- 输入区域 -->
    <view class="input-area" >
      <textarea type="text" class="input-box" v-model="text" auto-height/>
      <view v-if="text !== ''" class="view-btn">
        <button
          class="send-btn"
          hover-class="button-hover"
          @click="sendMessage"
        >发送
        </button>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
import { getMessage } from '@/services/login';
import type { Message } from '@/type/message';
import { reactive, ref } from 'vue'

const { windowHeight} = uni.getSystemInfoSync()

const msgs = ref<Message[]>([])
const text = ref('')

//发送消息
const inputMessage = reactive({
  bot_id: "7373135520182452233",
  user: "cwx",
  query: "",
  stream: false
})
// 点击发送
const intoId = ref('')
const sendMessage = async () => {
  let msg = {
    content: '',
    content_type: '',
    role: '',
    type: ''
  }
  //获取自己说的话
  msg.content = text.value
  msgs.value.push(msg)
  inputMessage.query = text.value
  text.value = ''
  //滚动到自己说的话
  let length1 = msgs.value.length-1
  intoId.value = `id_${length1}`
  const res = await getMessage(inputMessage)
  msgs.value.push(res.messages[0])
  let length2 = msgs.value.length-1
  intoId.value = `id_${length2}`
  console.log(res.messages)
}
</script>

<style>
page {
  height: 100%;
  overflow: hidden;
}
.container {
  background-image: url(../../static/background.jpg);
  background-repeat: no-repeat;
  background-size: cover;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.message-area {
  display: flex;
  overflow-y: auto;
  justify-content: flex-end;
  margin-top: 10px;
}

.input-area {
  display: flex;
  flex: 1;
  padding: 10px;
  background-color: #f0f0f0;
  align-items: center;
}

.input-box {
  flex: 1;
  font-size: 18px;
  padding-left: 9px;
  padding-top: 9px;
  padding-bottom: 9px;
  border: none;
  border-radius: 5px;
  background-color: #fff;
}
.view-btn{
  height: 100%;
  display: flex;
  flex-direction: column;
}

.send-btn {
  margin-left: 10px;
  padding: 0 15px;
  background-color: #1aad19;
  color: #ffffff;
  border-radius: 5px;
  line-height: 40px;
  text-align: center;
  animation: slideIn 0.3s ease;
  margin-top: auto;
}
@keyframes slideIn {
  from {
    transform: translateX(100%);
  }
  to{
    transform: translateX(0);
  }
}

.message-right {
  display: flex;
  margin-bottom: 10px;
  justify-content: flex-end;
}
.message-left {
  display: flex;
  margin-bottom: 10px;
  justify-content: flex-start;
}


.avatar {
  width: 40px;
  height: 40px;
  background-color: #ccc;
  border-radius: 20px;
  margin: 0 10px;
}

.text {
  max-width: 60%;
  padding: 8px 10px;
  font-size: 16px;
  color: #333;
  background-color: #fff;
  border-radius: 5px;
}

.message-right .text {
  background-color: #9fdf9f;

}

.message-left .avatar {
  background-color: #9fdf9f;
}
</style>
